<script setup>
import { Tabbar, TabbarItem, Badge } from "vant";
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useRoute } from "vue-router";
import { useCart } from "./store/carts";
import { isLogin } from "./uitils/Token";
const store = useCart();
const { loadData } = store;
const { cartCount } = storeToRefs(store);
if (isLogin) {
  loadData();
}
// 设置隐藏导航栏
const route = useRoute();
const isTabbar = ref(true);
watch(route, (v) => {
  if (v.meta.isTabared) {
    isTabbar.value = false;
  } else {
    isTabbar.value = true;
  }
});
</script>

<template>
  <router-view class="main"></router-view>
  <tabbar route active-color="red" :fixed="false" v-show="isTabbar">
    <tabbar-item replace to="/" icon="wap-home">首页</tabbar-item>
    <tabbar-item replace to="/list" icon="wap-nav">分类</tabbar-item>
    <tabbar-item replace to="/news" icon="search">发现</tabbar-item>
    <tabbar-item replace to="/cart" icon="shopping-cart" :badge="cartCount"
      >购物车</tabbar-item
    >
    <tabbar-item replace to="/user" icon="manager">我的易购</tabbar-item>
  </tabbar>
</template>
<style lang="scss">
html,
body,
#app {
  height: 100%;
}
#app {
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: auto;
  }
}
</style>
